<template>
  <view class="search">
    <!-- 搜索 -->
    <SearchInput ref="search"></SearchInput>
    <!-- 分类 -->
    <view class="classify">
      <view class="singer">
        <text class="iconfont icon-gerenzhongxin"></text>
        <text>歌手</text>
      </view>
      <view class="genre">
        <text class="iconfont icon-icon-"></text>
        <text>曲风</text>
      </view>
      <view class="prefecture">
        <text class="iconfont icon-grouping"></text>
        <text>专区</text>
      </view>
      <view class="music">
        <text class="iconfont icon-maikefeng1"></text>
        <text>识曲</text>
      </view>
    </view>
    <!-- 热搜榜 -->
    <view class="hotList">
      <view class="hot_header">
        <text>热搜榜</text>
      </view>
      <view class="hot_list">
        <view class="li" v-for="(item,index) in searchHot" :key="index">
          <text :style="index < 3 ? 'color:red; font-weight:bold': '' ">{{ index + 1 }}</text>
          <text class="song_name" @click="gotoSearchResultsPage(item.searchWord)">{{ item.searchWord }}</text>
          <image v-if="item.iconUrl" :src="item.iconUrl" mode="heightFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import SearchInput from '@/common/components/SearchInput/SearchInput.vue'
  import { getSearchHotAPI } from '@/common/api/searchAPI.js'
  import { ref,onMounted } from 'vue'
  
  const search = ref(null)
  const gotoSearchResultsPage = (key) => {
    search.value.words = key
    search.value.gotoSearchResultsPage()
  }
  
  //获取热搜榜
  const searchHot = ref([])
  const getSearchHot = async () => {
    const res = await getSearchHotAPI()
    if(res.code !== 200) return uni.showToast({
      title:'获取热搜榜失败！',
      duration:2000,
      icon:'error'
    })
    searchHot.value = res.data
  }
  
  onMounted(()=>{
    getSearchHot()
  })
</script>

<style lang="scss" scoped>
  .search{
    background-color: #eee9f1;
    height: 100%;
    .classify{
      display: flex;
      height: 100rpx;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      .iconfont{
        color:red;
        font-size: 40rpx;
        margin-right: 10rpx;
      }
    }
    .hotList{
      padding: 0 20rpx;
      background-color: #fff;
      .hot_header{
        height: 100rpx;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #eee9f1;
        font-weight: bold;
      }
      .hot_list{
        display: flex;
        flex-wrap: wrap;
        .li{
          width: 50%;
          height: 70rpx;
          line-height: 70rpx;
          display: flex;
          align-items: center;
          .song_name{
            margin-left: 20rpx;
            font-size: 25rpx;
            cursor: pointer;
          }
          image{
            height: 30rpx;
            width: 60rpx;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
</style>